<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button
        class="mr-5px"
        @click="submitForm"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['config:wage-production-price-apply:submit']"
        >提 交</el-button
      >
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <el-form ref="formRef" :model="formData" :inline="true" label-width="100px">
        <el-form-item label="工单号" prop="workTaskNumber">
          <el-input v-model="formData.workTaskNumber" disabled />
        </el-form-item>
        <el-form-item label="产品编号" prop="productNumber">
          <el-input v-model="formData.productNumber" disabled />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="formData.productName" disabled />
        </el-form-item>
        <el-form-item label="部件编号" prop="partNumber">
          <el-input v-model="formData.partNumber" disabled />
        </el-form-item>
        <el-form-item label="部件名称" prop="partName">
          <el-input v-model="formData.partName" disabled />
        </el-form-item>
        <el-form-item label="图纸图号" prop="drawingNumber">
          <el-input v-model="formData.drawingNumber" disabled />
        </el-form-item>
        <el-form-item label="计划数量" prop="planQuantity">
          <el-input v-model="formData.planQuantity" disabled />
        </el-form-item>
        <el-form-item label="完工数量" prop="completeQuantity">
          <el-input v-model="formData.completeQuantity" disabled />
        </el-form-item>
        <el-form-item label="差异数量" prop="differenceQuantity">
          <el-input v-model="formData.differenceQuantity" disabled />
        </el-form-item>
      </el-form>
      <p class="baseTitle">生产任务</p>
      <el-table
        ref="singleTableRef"
        :data="formData.productionTasksList"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          :prop="item.val"
          :label="item.label"
          :min-width="item.width"
          :align="item.val == 'processPrice' ? 'right' : 'left'"
          :header-align="item.val == 'processPrice' ? 'right' : 'left'"
          :key="index"
          v-for="(item, index) in productionTasksTitle"
        >
          <template #default="scope">
            <template v-if="item.dict">
              {{ getDictLabel(item.dict, scope.row[item.val]) }}
            </template>
            <template v-else>
              <el-button
                v-if="item.label == '图纸图号'"
                type="primary"
                link
                @click="jumpPdfFile(scope.row[item.val])"
                >{{ scope.row[item.val] }}</el-button
              >
              <template v-else>{{ scope.row[item.val] }}</template>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <p class="baseTitle">项目单价</p>
      <el-button
        class="mt-5px mb-5px"
        @click="selectProjectUnitPrice"
        type="primary"
        :disabled="formLoading"
        >选择项目单价</el-button
      >
      <el-table ref="multipleTableRef" :data="formData.relationOthers" style="width: 100%" border>
        <el-table-column type="index" width="80" label="序号" align="center" />
        <!-- 如果是机加 -->
        <template v-if="formData.dictProcessName == 20">
          <el-table-column
            :label="item.label"
            :min-width="item.width"
            :prop="item.val"
            v-for="item in tableTitle"
            :key="item.val"
            :align="item.val == 'unitPrice' ? 'right' : 'left'"
            :header-align="item.val == 'unitPrice' ? 'right' : 'left'"
          >
            <template #default="scope">
              <template v-if="item.val == 'quantity'">
                <el-input v-model="scope.row[item.val]" type="number" />
              </template>
              <template v-else>{{ scope.row[item.val] }}</template>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :label="item.label"
            :min-width="item.width"
            :prop="item.val"
            v-for="item in otherTableTitle"
            :key="item.val"
            :align="item.val == 'unitPrice' ? 'right' : 'left'"
            :header-align="item.val == 'unitPrice' ? 'right' : 'left'"
          >
            <template #default="scope">
              <template v-if="item.val == 'quantity'">
                <el-input v-model="scope.row[item.val]" type="number" />
              </template>
              <template v-else>{{ scope.row[item.val] }}</template>
            </template>
          </el-table-column>
        </template>
        <el-table-column
            label="操作"
            min-width="100"
            align="left"
            header-align="left"
            fixed="right"
          >
            <template #default="scope">
              <el-button @click="delCol(scope.$index)" type="danger" link>移除行</el-button>
            </template>
          </el-table-column>
      </el-table>
    </el-scrollbar>
    <!-- 机加项目单价 -->
    <projectUnitPrice ref="projectUnitPriceRef" @selectList="returnProjectUnitPrice" />
    <!-- 油漆、布线、电柜项目单价 -->
    <otherUnitPrice ref="otherUnitPriceRef" @selectList="returnProjectUnitPrice" />
  </div>
</template>
<script setup lang="ts">
   import { getDictLabel } from '@/utils/dict'
   import * as WageProductionPriceApplyApi from '@/api/config/wageProductionPriceApply'
   import { useTagsViewStore } from '@/store/modules/tagsView'
   /**机加项目单价 */
   import projectUnitPrice from './components/projectUnitPrice.vue'
   /**油漆、布线、电柜项目单价 */
   import otherUnitPrice from './components/otherUnitPrice.vue'
   import { jumpPdfFile } from '@/utils/formCreate'
   const { t } = useI18n() // 国际化
   const message = useMessage() // 消息弹窗

   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const formData = ref({})
    //移除行
    const delCol = (index:number) => {
      formData.value.relationOthers.splice(index,1)
    }
   /**选择项目单价
    * 选中数据
    * 工序名称
    * 机加工序类型
    */
   const projectUnitPriceRef = ref()
   const otherUnitPriceRef = ref([])
   const selectProjectUnitPrice = () => {
     //如果是机加
     if (formData.value.dictProcessName == 20) {
       projectUnitPriceRef.value.open(
         formData.value.relationOthers,
         formData.value.dictProcessName,
         formData.value.dictMachiningProcess
       )
     } else {
       /**油漆、布线、电柜 */
       otherUnitPriceRef.value.open(formData.value.relationOthers, formData.value.dictProcessName)
     }
   }
   /**项目单价选中返回 */
   const returnProjectUnitPrice = (list: Array) => {
     const data = JSON.parse(JSON.stringify(list))
     data.map((item) => {
       item.relationId = item.id
       item.quantity = 1
     })
     formData.value.relationOthers = data
   }

   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/config/config/salaryAssessment/wageProductionPriceApply'
     })
   }
   /** 提交表单 */
   const submitForm = async () => {
     if (!formData.value.relationOthers) {
       message.error('项目单价不能为空！')
       return
     }
     let data = {
       id: formData.value.id,
       processPrice: 0,
       relations: formData.value.relationOthers
     }
     let flag = false
     formData.value.relationOthers.forEach((item) => {
       //机加
       if (formData.value.dictProcessName == 20) {
         if ([0, '', undefined, null].includes(item.quantity)) {
           flag = true
         }
         data.processPrice += parseFloat(item.unitPrice) * parseFloat(item.quantity)
       } else {
         data.processPrice += parseFloat(item.unitPrice)
       }
     })
     if (flag) {
       message.error('数量不能为空！')
       return
     }
     formLoading.value = true
     try {
       data.processPrice = data.processPrice.toFixed(4)
       await WageProductionPriceApplyApi.updateWageProductionPriceApply(data)
       message.success(t('common.updateSuccess'))
       goBack()
     } finally {
       formLoading.value = false
     }
   }
   // 获得id
   const { query } = useRoute() // 路由的查询
   /** 初始化 */
   //生产任务表头
   const productionTasksTitle = ref([
     {
       label: '工单号/任务单号',
       val: 'workTaskNumber',
       width: 200
     },
     {
       label: '产品编号',
       val: 'productNumber',
       width: 200
     },
     {
       label: '产品名称',
       val: 'productName',
       width: 200
     },
     {
       label: '产品规格',
       val: 'productStandard',
       width: 200
     },
     {
       label: '订单数量',
       val: 'orderQuantity',
       width: 200
     },
     {
       label: '编号',
       val: 'code',
       width: 200
     },
     {
       label: '部件编号',
       val: 'partNumber',
       width: 200
     },
     {
       label: '部件名称',
       val: 'partName',
       width: 200
     },
     {
       label: '图纸图号',
       val: 'drawingNumber',
       width: 200
     },
     {
       label: '部件规格',
       val: 'partSpecification',
       width: 200
     },
     {
       label: '材质',
       val: 'material',
       width: 200
     },
     {
       label: '规格',
       val: 'specification',
       width: 200
     },
     {
       label: '净尺寸(长)',
       val: 'netSizeLength',
       width: 200
     },
     {
       label: '净尺寸(宽)',
       val: 'netSizeWidth',
       width: 200
     },
     {
       label: '下料尺寸(长)',
       val: 'cuttingSizeLength',
       width: 200
     },
     {
       label: '下料尺寸(宽)',
       val: 'cuttingSizeWidth',
       width: 200
     },
     {
       label: '机加工序',
       val: 'dictMachiningProcess',
       width: 200,
       dict:'machining_process'
     },
     {
       label: '计划数量',
       val: 'planQuantity',
       width: 200
     },
     {
       label: '报工数量',
       val: 'reportQuantity',
       width: 200
     },
     {
       label: '完工数量',
       val: 'completeQuantity',
       width: 200
     },
     {
       label: '差异数量',
       val: 'differenceQuantity',
       width: 200
     },
     {
       label: '加工单价',
       val: 'processPrice',
       width: 200
     },
     {
       label: '下料工序',
       val: 'workType',
       width: 200
     },
     {
       label: '生产班组',
       val: 'productionTeam',
       width: 200
     },
     {
       label: '设备名称',
       val: 'deviceName',
       width: 200
     },
     {
       label: '设备编码',
       val: 'deviceCode',
       width: 200
     },
     {
       label: '作业者',
       val: 'operator',
       width: 200
     }
   ])
   //项目单价表头 ---   机加
   const tableTitle = ref([
     {
       label: '零件名称',
       val: 'partsName',
       width: 200
     },
     {
       label: '规格',
       val: 'specification',
       width: 200
     },
     {
       label: '加工工序',
       val: 'processing',
       width: 200
     },
     {
       label: '单位',
       val: 'unit',
       width: 200
     },
     {
       label: '数量',
       val: 'quantity',
       width: 100
     },
     {
       label: '单价(元)',
       val: 'unitPrice',
       width: 100
     },
     {
       label: '备注',
       val: 'remark',
       width: 200
     }
   ])
   /**项目单价 ---   油漆、布线、电柜表头 */
   const otherTableTitle = ref([
     {
       label: '设备名称',
       val: 'deviceName',
       width: 200
     },
     {
       label: '产品规格',
       val: 'productStandard',
       width: 200
     },
     {
       label: '项目内容',
       val: 'projectContent',
       width: 200
     },
     {
       label: '工时',
       val: 'manHour',
       width: 200
     },
     {
       label: '数量',
       val: 'quantity',
       width: 100
     },
     {
       label: '单价(元)',
       val: 'unitPrice',
       width: 100
     },
     {
       label: '备注',
       val: 'remark',
       width: 200
     }
   ])
   const contentHeight = ref(0)
   onMounted(async () => {
     formLoading.value = true
     if (query.id) {
       formData.value = await WageProductionPriceApplyApi.getWageProductionPriceApply(query.id)
       formData.value.productionTasksList = [{ ...formData.value }]
       contentHeight.value = document.body.clientHeight - 127
     }
     formLoading.value = false
   })
</script>
<style lang="scss" scoped>
   .contentView {
     padding: 10px;
     background: #fff;
   }
   .baseTitle {
     font-weight: bold;
     padding: 20px 0;
   }
   .tableIpt {
     :deep(.el-input__inner) {
       text-align: center;
     }
   }
</style>